<script lang="ts" setup>
  import { ref, defineProps, markRaw } from 'vue';

  let currentTab = ref<string>('home');

  const props = defineProps({
    activeColor: { type: String, default: '' },
    inactiveColor: { type: String, default: '#999' },
    tabList: { type: Array<any>, default: [] },
  });

  const themeColor = computed(() => {
    return props.tabList.length > 0 && props.tabList[0].active_color;
  });
  const defaultColor = computed(() => {
    return props.tabList.length > 0 && props.tabList[0].default_color;
  });

  const tabChange = (name: string) => {
    currentTab.value = name;
    uni.$emit('tabClick', name);
  };
</script>

<template>
  <block>
    <u-tabbar
      :value="currentTab"
      @change="tabChange"
      :fixed="true"
      :active-color="themeColor"
      :inactive-color="defaultColor"
      :placeholder="false"
      :safeAreaInsetBottom="false"
    >
      <u-tabbar-item
        v-for="(item, index) in tabList"
        :key="index"
        :text="item.title"
        :name="item.name"
      >
        <template #active-icon>
          <!-- <image class="u-page__item__slot-icon" src="https://cdn.uviewui.com/uview/common/bell-selected.png"></image> -->
          <u-icon :name="item.icon" :color="item.active_color"></u-icon>
        </template>
        <template #inactive-icon>
          <u-icon :name="item.icon" :color="item.default_color"></u-icon>
          <!-- <image class="u-page__item__slot-icon" src="https://cdn.uviewui.com/uview/common/bell.png"></image> -->
        </template>
      </u-tabbar-item>
    </u-tabbar>
  </block>
</template>

<style lang="scss" scoped>
  .u-page__item__slot-icon {
    width: 32rpx;
    height: 32rpx;
  }
</style>
